<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client with STOMP</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.1/dist/sockjs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
    <h1>WebSocket Client</h1>
    <div id="messages"></div>

    <script>
        // 创建连接 WebSocket
        var socket = new SockJS('http://192.188.123.2:4399/ws');  // 连接到 Spring Boot 中的 WebSocket 端点
        var stompClient = Stomp.over(socket);

        // 连接后订阅消息
        stompClient.connect({}, function (frame) {
            sendMessage();
            console.log('Connected: ' + frame);
            stompClient.subscribe('/broadcast/test', function (message) {
                console.log("233");
                var messageDiv = document.createElement('div');
                messageDiv.textContent = message.body;
                document.getElementById('messages').appendChild(messageDiv);
            });
        });

        // 发送消息到服务器
        function sendMessage() {
            stompClient.send("/send/hello", {}, "Hello, this is a test message!");
        }
    </script>
</body>
</html>
